<template>
  <ContentWrap v-loading="formLoading">
    <div class="btns">
      <template v-if="formType !== 'view'">
        <el-button
          type="primary"
          @click="submitForm('handle')"
          :loading="formLoading"
          v-hasPermi="['technology:design-complete-ticket:update']"
        >
          提交
        </el-button>
        <el-button
          type="primary"
          @click="submitForm('save')"
          :loading="formLoading"
          v-hasPermi="['technology:design-complete-ticket:update']"
        >
          保存
        </el-button>
        <el-button
          type="danger"
          @click="submitForm('delete')"
          :loading="formLoading"
          v-if="formData.dictTicketStatus === 70"
          v-hasPermi="['technology:design-complete-ticket:update']"
        >
          作废
        </el-button>
      </template>
      <el-button @click="goBack"> 关闭 </el-button>
    </div>
    <div class="formView" :style="`height: ${contentHeight}px`">
      <el-tabs type="border-card" class="demo-tabs">
        <el-tab-pane label="完工单">
          <div>
            <img src="@/assets/imgs/hasColorLogo.png" alt="" class="logo" />
            <div class="logoTitle">设计完工单</div>
          </div>
          <div class="firstCard">
            <el-row class="colItem">
              <el-col :span="6" class="cardItem">
                <div class="formTitle">任务单号</div>
                <el-input v-model="formData.taskNumber" readonly>
                  <template #append>
                    <el-button :disabled="!(formType === 'create')" @click="chooseTask" :icon="Search" />
                  </template>
                </el-input>
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">任务状态</div>
                <el-select
                  :disabled="formType === 'view'"
                  v-model="formData.dictTaskCompleteStatus"
                  clearable
                  class="!w-220px"
                >
                  <el-option label="已完成" :value="1" />
                  <el-option label="未完成" :value="0" />
                </el-select>
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">进度</div>
                <el-input-number
                  v-model="formData.process"
                  :disabled="formType === 'view'"
                  :precision="2"
                  :step="1"
                  :min="0"
                  :max="100"
                  controls-position="right"
                />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">产品图号</div>
                <el-input :disabled="formType === 'view'" v-model="formData.productDrawingNumber" />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="6" class="cardItem">
                <div class="formTitle">产品编号</div>
                <el-input v-model="formData.productNumber" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">客户代码</div>
                <el-input v-model="formData.customerCode" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">部件类型</div>
                <el-input v-model="formData.partType" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">出图类型</div>
                <el-select v-model="formData.dictDrawingType" clearable class="!w-220px" disabled>
                  <el-option
                    v-for="dict in getIntDictOptions('dict_drawing_type')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-col>
            </el-row>
            <div class="colItem editType">
              <div class="editTypeTitle">图纸改动类型</div>
              <div class="editTypeTitle">无改动</div>
              <div class="editTypeTitle">规格化改动</div>
              <div class="editTypeTitle">优化改动</div>
              <div class="editTypeTitle">仿制型新产品</div>
              <div class="editTypeTitle">创新型新产品</div>
              <div class="editTypeTitle">合计</div>
            </div>
            <div class="colItem editType">
              <div class="editTypeTitle">图纸改动数量</div>
              <template v-if="formData.alerts.length">
                <div class="editTypeTitle" v-for="(item, index) in formData.alerts" :key="index"
                  ><el-input-number
                    :disabled="index === 5 || formType === 'view'"
                    v-model="item['alertQuantity']"
                    :precision="0.1"
                    :step="1"
                    :min="0"
                    controls-position="right"
                    @change="setTotal"
                /></div>
              </template>
            </div>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle">出图内容</div>
                <el-input
                  v-model="formData.drawingContent"
                  :disabled="formType === 'view'"
                  maxlength="200"
                  :rows="4"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle">改动内容</div>
                <el-input
                  v-model="formData.changeContent"
                  :disabled="formType === 'view'"
                  maxlength="200"
                  :rows="4"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle">备注</div>
                <el-input
                  v-model="formData.remark"
                  :disabled="formType === 'view'"
                  maxlength="200"
                  :rows="4"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="18" class="cardItem">
                <div class="formBigTitle">校对意见</div>
                <el-input
                  v-model="formData.proofreaderOpinion"
                  disabled
                  maxlength="200"
                  :rows="4"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
              <el-col :span="6" class="newCardItem">
                <div class="disFlex alignCenter">
                  <div class="newFormTitle">校对人</div>
                  <el-select
                    v-model="verifiorName"
                    value-key="jobNumber"
                    filterable
                    remote
                    :remote-method="getSelectDesignersList"
                    :loading="verifierLoading"
                    style="width: 100%"
                    @change="changeDesigner"
                    :disabled="formType === 'view'"
                  >
                    <el-option
                      v-for="dict in designersList"
                      :key="dict['id']"
                      :label="dict['designerPersonName']"
                      :value="{
                        jobNumber: dict.jobNumber,
                        designerPersonName: dict.designerPersonName
                      }"
                    />
                  </el-select>
                </div>
                <div class="disFlex alignCenter top-border">
                  <div class="newFormTitle">校对时间</div>
                  <el-input v-model="formData.proofreaderTime" disabled />
                </div>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="18" class="cardItem">
                <div class="formBigTitle">审核意见</div>
                <el-input
                  v-model="formData.approverOpinion"
                  disabled
                  maxlength="200"
                  :rows="4"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
              <el-col :span="6" class="newCardItem">
                <div class="disFlex alignCenter">
                  <div class="newFormTitle">审核人</div>
                  <el-input v-model="formData.approverName" disabled />
                </div>
                <div class="disFlex alignCenter top-border">
                  <div class="newFormTitle">审核时间</div>
                  <el-input v-model="formData.auditorTime" disabled />
                </div>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="18" class="cardItem">
                <div class="formBigTitle">批准结果</div>
                <el-input
                  v-model="formData.ratifyResult"
                  disabled
                  maxlength="200"
                  :rows="4"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
              <el-col :span="6" class="newCardItem">
                <div class="disFlex alignCenter">
                  <div class="newFormTitle">批准人</div>
                  <el-input v-model="formData.ratifiorName" disabled />
                </div>
                <div class="disFlex alignCenter top-border">
                  <div class="newFormTitle">批准时间</div>
                  <el-input v-model="formData.ratifyTime" disabled />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="图纸清单">
          <div class="btns">
            <el-button
              type="primary"
              @click="showImport"
              v-hasPermi="['config:drawing-designer:import']"
            >
              数据导入
            </el-button>
            <el-button
              type="primary"
              @click="handleExport"
              v-hasPermi="['config:drawing-designer:export']"
            >
              数据导出
            </el-button>
          </div>
          <el-table
            border
            ref="multipleTableRef"
            @selection-change="handleSelectionChange"
            :data="formData.drawings"
          >
            <el-table-column type="selection" width="50" />
            <el-table-column label="图纸图号" align="center" prop="partDrawingNumber">
              <template #default="scope">
                <el-input
                  v-nextInput="'partDrawingNumber'"
                  name="partDrawingNumber"
                  v-model="scope.row.partDrawingNumber"
                />
              </template>
            </el-table-column>
            <el-table-column label="零部件名称" align="center" prop="partName">
              <template #default="scope">
                <el-input v-nextInput="'partName'" name="partName" v-model="scope.row.partName" />
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" prop="quantity">
              <template #default="scope">
                <el-input v-nextInput="'quantity'" name="quantity" v-model="scope.row.quantity" />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" v-if="formType !== 'view'">
              <template #default="scope">
                <!-- 编辑删除 -->
                <el-button
                  v-if="formType === 'update'"
                  type="danger"
                  link
                  :loading="deleteLoading"
                  @click="handleDelete(scope.row.id)"
                >
                  删除行
                </el-button>
                <!-- 新增删除 -->
                <el-button
                  v-if="formType === 'create'"
                  type="danger"
                  link
                  :loading="deleteLoading"
                  @click="handleDeleteCreate(scope.$index)"
                >
                  删除行
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="制图流程单">
          <div class="title">基本信息</div>
          <el-form label-width="110px" :inline="true">
            <el-form-item label="产品编号">
              <el-input v-model="formData.productNumber" disabled />
            </el-form-item>
            <el-form-item label="客户代码">
              <el-input v-model="formData.customerCode" disabled />
            </el-form-item>
            <el-form-item label="产品类型">
              <el-input v-model="formData.productType" disabled />
            </el-form-item>
          </el-form>
          <div class="title">基本参数</div>
          <el-form label-width="110px" :inline="true">
            <el-form-item
              v-for="item in formData.baseParams"
              :key="item['id']"
              :label="item['baseParamName']"
            >
              <el-input v-model="item['baseParamValue']" />
            </el-form-item>
          </el-form>
          <div class="title">校对参数</div>
          <el-table border :data="formData.verifyParams" :span-method="arraySpanMethod">
            <el-table-column label="设备/部件名称" align="center" prop="partName" />
            <el-table-column label="项目" align="center" prop="projectName" />
            <el-table-column label="合同要求/总图尺寸" align="center" prop="requirementOrSize">
              <template #default="scoped">
                <el-input
                  v-nextInput="'requirementOrSize'"
                  name="requirementOrSize"
                  v-model="scoped.row.requirementOrSize"
                />
              </template>
            </el-table-column>
            <el-table-column label="设计值" align="center" prop="designValue">
              <template #default="scoped">
                <el-input
                  v-nextInput="'designValue'"
                  name="designValue"
                  v-model="scoped.row.designValue"
                />
              </template>
            </el-table-column>
            <el-table-column label="校对值" align="center" prop="verifyValue" />
            <el-table-column label="备注" align="center" prop="remark">
              <template #default="scoped">
                <el-input v-nextInput="'remark'" name="remark" v-model="scoped.row.remark" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </ContentWrap>

  <!-- 编辑数据导入 -->
  <CusUploadFile ref="cusUploadFile" @refresh="getDrawingList" :onlyUpdate="true" />
  <!-- 新增数据导入 -->
  <uploadFile ref="createUploadFileRef" @refresh="getDrawData" />
  <!-- 导出 -->
  <ExportFile ref="exportRef" @download="downloadFun" />
  <!-- 选择任务单 -->
  <TaskForm @getVerifyParams="getVerifyParams" :contentHeight="contentHeight" ref="taskForm" />
</template>
<script setup lang="ts">
  import * as DesignCompleteTicketApi from '@/api/technology/designCompleteTicket'
  import * as DrawingTaskApi from '@/api/technology/drawingTask'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { getIntDictOptions } from '@/utils/dict'
  import * as componentApi from '@/api/componentApi'
  import download from '@/utils/download'
  import { Search } from '@element-plus/icons-vue'
  import TaskForm from './taskForm.vue'
  import uploadFile from './uploadFile.vue'

  const { t } = useI18n() // 国际化
  const message = useMessage() // 消息弹窗

  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const deleteLoading = ref(false)
  const formType = ref('') // 表单的类型：create - 新增；update - 修改
  const formData = ref({
    id: undefined,
    event: '通过',
    taskId: undefined, //任务单id
    taskNumber: undefined, //任务单号
    process: undefined, //任务完成进度
    dictTicketStatus: undefined, //完工单状态
    productDrawingNumber: undefined, //产品图号
    productName: undefined, //产品名称
    productType: undefined, //产品类型
    productNumber: undefined, //产品编号
    partType: undefined, //部件名称
    componentProductId: undefined, //部件id
    dictDrawingType: undefined, //出图类型
    drawingContent: undefined, //出图内容
    changeContent: undefined, //改动内容
    alerts: [], //图纸改动数量
    remark: undefined, //备注
    dictTaskCompleteStatus: undefined, //任务状态
    proofreaderOpinion: undefined, //校对意见
    proofreader: undefined,
    proofreaderName: undefined, //校对人姓名
    proofreaderTime: undefined, //校对时间
    approverName: undefined, //审核人
    approverOpinion: undefined, //审核意见
    auditorTime: undefined, //审核时间
    approver: undefined,
    approverTime: undefined,
    ratifyResult: undefined, //批准结果
    ratifiorName: undefined, //批准人
    ratifior: undefined,
    ratifyTime: undefined, //批准时间
    customerCode: undefined, //客户代码
    productStandard: undefined, //产品规格
    drawings: [], //图纸清单
    verifyParams: undefined, //校对参数
    baseParams: undefined //基本参数
  })
  const contentHeight = ref(0)

  const taskForm = ref() //选择任务单ref

  // 打开选择任务单弹窗
  const chooseTask = () => {
    taskForm.value.open()
  }

  type OptionVerifier = {
    jobNumber: string
    designerPersonName: string
  }
  const verifiorName = ref<OptionVerifier>()

  /**校对人 */
  const verifierLoading = ref(false)
  const designersList = ref<OptionVerifier[]>([])
  const getSelectDesignersList = async (query: string) => {
    verifierLoading.value = true
    let data = await componentApi.getDesignersList(query)
    designersList.value = data
    verifierLoading.value = false
  }

  // 校对人改变
  const changeDesigner = (val) => {
    formData.value.proofreader = val.jobNumber
    formData.value.proofreaderName = val.designerPersonName
  }

  // 合并设备/部件名称
  const arraySpanMethod = ({ row, rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
      if (rowIndex === 0 || row.partName != formData.value.verifyParams[rowIndex - 1].partName) {
        let rowspan = 0
        formData.value.verifyParams.forEach((element) => {
          if (element.partName === row.partName) {
            rowspan++
          }
        })
        return [rowspan, 1]
      } else {
        return [0, 0]
      }
    }
  }

  // 计算改动该类型合计
  const setTotal = () => {
    let sum = 0
    formData.value.alerts.map((item, index) => {
      if (index < 5) {
        sum += parseFloat(item['alertQuantity'] || 0)
      }
    })
    formData.value.alerts[5]['alertQuantity'] = sum
  }

  /**返回 */
  const tagsViewStore = useTagsViewStore()
  const route = useRouter() // 路由
  const goBack = async () => {
    //获取当前路由并删除tagView
    tagsViewStore.delView(route.currentRoute.value)
    //跳转列表页
    route.push({
      path: '/technology/technology/drawingProduction/designComplete'
    })
  }

  // 删除图纸清单行
  const handleDelete = async (id: number) => {
    deleteLoading.value = true
    try {
      await DesignCompleteTicketApi.deleteDrawing(id)
      getDrawingList()
      message.success('删除成功')
    } finally {
      deleteLoading.value = false
    }
  }

  // 新增删除图纸清单行
  const handleDeleteCreate = (index: number) => {
    formData.value.drawings.splice(index, 1)
  }

  /**导入显示 */
  const cusUploadFile = ref()
  const createUploadFileRef = ref()
  const showImport = () => {
    if (formType.value === 'update') {
      cusUploadFile.value.open(
        `/technology/ticket-drawing/get-import-template`,
        `/technology/ticket-drawing/import/${formData.value.id}`
      )
    } else if (formType.value === 'create') {
      createUploadFileRef.value.open(
        `/technology/ticket-drawing/get-import-template`,
        `/technology/ticket-drawing/import-template`
      )
    }
  }

  // 导入之后请求图纸清单数据
  const getDrawingList = async () => {
    const res = await DesignCompleteTicketApi.getDrawingList({
      taskNumber: formData.value.taskNumber,
      technologyDesignCompleteTicketId: query.id ? query.id : ''
    })
    formData.value.drawings = res.list
  }

  // 新增导入图纸清单后获取数据
  const getDrawData = (data) => {
    for (let i = 0; i < data.length; i++) {
      let flag = false
      for (let j = 0; j < formData.value.drawings.length; j++) {
        if (JSON.stringify(formData.value.drawings[j]) === JSON.stringify(data[i])) {
          flag = true
          break
        }
      }
      if (!flag) {
        formData.value.drawings.push(data[i])
      }
    }
  }

  // 多选赋值
  const multipleSelection = ref([])
  const handleSelectionChange = (val) => {
    multipleSelection.value = val
  }

  /** 导出按钮操作 */
  const exportRef = ref()
  const multipleTableRef = ref()
  const handleExport = async () => {
    exportRef.value.open()
  }

  // 下载
  const downloadFun = async () => {
    const val = exportRef.value.params
    let params = {
      fileName: val.name,
      technologyDesignCompleteTicketId: '',
      ids: ''
    }
    if (val.range === 'all') {
      params.technologyDesignCompleteTicketId = (query as any).id
    } else {
      multipleSelection.value.map((item) => {
        params.ids = (item as any).id + ',' + params.ids
      })
    }
    const data = await DesignCompleteTicketApi.exportDesignDrawing(params)
    download.excel(data, val.name)
    multipleTableRef.value!.clearSelection()
  }

  /** 提交表单 */
  const submitForm = async (type: string) => {
    const data = formData.value as unknown as DesignCompleteTicketApi.DesignCompleteTicketVO
    console.log(data.dictTaskCompleteStatus === undefined)
    if (data.dictTaskCompleteStatus === undefined) {
      message.notifyError('任务状态不能为空')
      return
    }
    if (!data.process) {
      message.notifyError('进度不能为空')
      return
    }
    if (!data.productDrawingNumber) {
      message.notifyError('产品图号不能为空')
      return
    }
    if (data.dictTaskCompleteStatus === 1 && data.process != 100) {
      message.notifyError('任务状态为已完成时，任务进度要为100')
      return
    }
    if (data.dictTaskCompleteStatus === 0 && data.process == 100) {
      message.notifyError('任务进度为100时，任务状态要选择已完成')
      return
    }
    if (!data.proofreaderName) {
      message.notifyError('校对人不能为空')
      return
    }
    // 提交请求
    formLoading.value = true
    try {
      if (type === 'handle') {
        await DesignCompleteTicketApi.handleDesignCompleteTicket(data)
        message.success(t('提交成功'))
      } else if (type === 'save') {
        if (formType.value === 'create') {
          await DesignCompleteTicketApi.createDesignCompleteTicket(data)
        } else {
          await DesignCompleteTicketApi.updateDesignCompleteTicket(data)
        }
        message.success(t('保存成功'))
      } else {
        // 70 编辑中 80 未通过
        if (![70, 80].includes(data.dictTicketStatus)) {
          message.notifyError('该状态不能作废')
          return
        }
        await DesignCompleteTicketApi.deleteDesignCompleteTicket(
          (formData.value as unknown as DesignCompleteTicketApi.DesignCompleteTicketVO).id
        )
        message.success(t('作废成功'))
      }
      goBack()
    } finally {
      formLoading.value = false
    }
  }

  // 查询校对参数
  const getVerifyParams = async (arr) => {
    formData.value.taskNumber = arr[0].taskNumber
    // getDrawingList()
    const res = await componentApi.getDrawingProcessTemplate({ productType: arr[0].productType })
    formData.value.verifyParams = res.verifyParams
    formData.value.baseParams = res.baseParams
    formData.value.productType = res.productType
    formData.value.taskId = arr[0].id
    formData.value.productName = arr[0].productName
    formData.value.productNumber = arr[0].productNumber
    formData.value.productStandard = arr[0].productStandard
    formData.value.customerCode = arr[0].customerCode
    formData.value.partType = arr[0].partType
    formData.value.componentProductId = arr[0].componentProductId
    formData.value.dictDrawingType = arr[0].dictDrawingType
  }

  const { query } = useRoute() // 路由的查询
  const getData = async () => {
    formLoading.value = true
    formType.value = (query as any).type
    if (query.id) {
      const res = await DesignCompleteTicketApi.getDesignCompleteTicket((query as any).id)
      formData.value = res
      verifiorName.value = {
        jobNumber: res.proofreader,
        designerPersonName: res.proofreaderName
      }
      designersList.value = [
        {
          jobNumber: res.proofreader,
          designerPersonName: res.proofreaderName
        }
      ]
      formData.value.event = '通过'
    } else {
      if (query.carryingParametersId) {
        //制图任务单完工跳转携带id
        const data = await DrawingTaskApi.getDrawingTask(query.carryingParametersId)
        console.log('data', data)
        const {
          productName,
          productNumber,
          productType,
          productStandard,
          customerCode,
          dictDrawingType,
          taskNumber
        } = data
        getVerifyParams([
          {
            id: data.drawingTask.id,
            taskNumber,
            productName,
            productNumber,
            productType,
            productStandard,
            customerCode,
            partType: data.drawingTask.partType,
            componentProductId: data.drawingTask.componentProductId,
            dictDrawingType
          }
        ])
      }
      formData.value.alerts = [
        { alterType: '无改动', alertQuantity: '0' },
        { alterType: '规格化改动', alertQuantity: '0' },
        { alterType: '优化改动', alertQuantity: '0' },
        { alterType: '仿制型新产品', alertQuantity: '0' },
        { alterType: '创新型产品', alertQuantity: '0' },
        { alterType: '合计', alertQuantity: '0' }
      ]
    }
    formLoading.value = false
  }

  /** 初始化 */

  onMounted(async () => {
    contentHeight.value = document.body.clientHeight - 132 - 57
    getData()
  })
</script>
<style lang="scss" scoped>
  .bg {
    background-color: #fff;
  }

  :deep(.el-input-number) {
    width: 100%;
  }

  .formView {
    overflow-y: auto;
  }

  .btns {
    margin-bottom: 10px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0 20px;
  }

  .logoTitle {
    font-size: 34px;
    margin: 10px auto 20px;
    text-align: center;
    width: 250px;
  }

  .logo {
    width: 200px;
    height: 50px;
    float: left;
  }

  .firstCard {
    border: 1px solid #000;

    :deep(.el-input__wrapper, .el-textarea__inner) {
      box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
    }

    :deep(.el-textarea__inner) {
      box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
    }

    .newCardItem {
      border-left: 1px solid #000;
    }

    .newFormTitle {
      width: 150px;
      height: 45px;
      line-height: 45px;
      background: #e9fbfb;
      text-align: center;
      border-right: 1px solid #000;
    }

    .disFlex {
      display: flex;
    }

    .alignCenter {
      align-items: center;
    }

    .top-border {
      border-top: 1px solid #000;
    }

    .colItem + .colItem {
      border-top: 1px solid #000;
    }

    .editType {
      display: flex;
      align-items: center;

      > div {
        width: 14.2857%;
        text-align: center;
      }

      .editTypeTitle {
        background: #e9fbfb;
      }

      > div + div {
        border-left: 1px solid #000;
      }
    }

    .cardItem {
      display: flex;
      align-items: center;
      line-height: 32px;

      .formTitle {
        flex-shrink: 0;
        width: 150px;
        height: 100%;
        line-height: 32px;
        background: #e9fbfb;
        text-align: center;
        border-right: 1px solid #000;
      }

      .formBigTitle {
        width: 150px;
        flex-shrink: 0;
        line-height: 93px;
        background: #e9fbfb;
        text-align: center;
        border-right: 1px solid #000;
      }
    }

    .cardItem + .cardItem {
      border-left: 1px solid #000;
    }
  }
</style>
